<template>
	<div class="home">
		<el-row :gutter="20">
			<el-card class="box-card" style="margin-top: 20px;">
				<el-form class="form">

					<el-form-item style="width:100%;">
						<el-button :loading="loading" size="medium" type="primary"
							style="width:100%; margin-left: 10px;" @click.native.prevent="showf">
							<span>首次登记</span>
						</el-button>
						<el-button :loading="loading" size="medium" type="info" style="width:100%; margin-top: 10px;"
							@click.native.prevent="open()">
							<span>我要申请</span>
						</el-button>
						<el-button :loading="loading" size="medium" type="warning" style="width:100%;margin-top: 10px;"
							@click.native.prevent="openz">
							<span>转移登记</span>
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</el-row>
		<el-row :gutter="20">
			<el-card class="box-card">

			</el-card>
		</el-row>



		<!-- 首次登记对话框 -->
		<el-dialog :title="title" :visible.sync="isShow" width="500px" append-to-body>
			<div v-if="">
				<el-form ref="fristForm" :model="fristForm" :rules="rules" label-width="80px">
					<el-form-item label="用户姓名" prop="uname">
						<el-input v-model="fristForm.uname" placeholder="请输入用户姓名" />
					</el-form-item>
					<el-form-item label="用户手机号" prop="uphone">
						<el-input v-model="fristForm.uphone" placeholder="请输入用户手机号" />
					</el-form-item>
					<el-form-item label="用户身份证" prop="uId">
						<el-input v-model="fristForm.uId" placeholder="请输入用户身份证" />
					</el-form-item>
					<el-form-item label="联系地址" prop="address">
						<el-input v-model="fristForm.address" placeholder="请输入联系地址" />
					</el-form-item>
					<el-form-item label="办理对象">
						<el-radio-group v-model="fristForm.resource">
							<el-radio label="个人办理"></el-radio>
							<el-radio label="法人办理"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-if="isFrist">
						<el-radio lable="1" v-model="radio">首次办理</el-radio>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- 转移登记对话框 -->
		<el-dialog :title="title" :visible.sync="isOpenz" width="500px" append-to-body>
			
				<el-form ref="fristForm" :model="fristForm" :rules="rules" label-width="80px">
					<el-form-item label="用户姓名" prop="uname">
						<el-input v-model="fristForm.uname" placeholder="请输入用户姓名" />
					</el-form-item>
					<el-form-item label="用户手机号" prop="uphone">
						<el-input v-model="fristForm.uphone" placeholder="请输入用户手机号" />
					</el-form-item>
					<el-form-item label="用户身份证" prop="uId">
						<el-input v-model="fristForm.uId" placeholder="请输入用户身份证" />
					</el-form-item>
					<el-form-item label="联系地址" prop="address">
						<el-input v-model="fristForm.address" placeholder="请输入联系地址" />
					</el-form-item>
					<el-form-item label="办理对象" prop="">
						<el-radio-group v-model="fristForm.resource">
							<el-radio label="个人办理"></el-radio>
							<el-radio label="法人办理"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="办理情形" prop="">
						<el-radio-group>
							<el-radio label="析产登记"></el-radio>
							<el-radio label="继承登记"></el-radio>
							<el-radio label="增量房登记"></el-radio>
							<el-radio label="赠与登记"></el-radio>
							<el-radio label="存量房登记"></el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listRuser,
		getRuser,
		delRuser,
		addRuser,
		updateRuser
	} from "@/api/rUser/ruser";
	export default {
		name: "Index",
		data() {
			return {
				// 版本号
				version: "3.8.5",
				isShow: false,
				fristForm: {},
				title: '',
				radio: '1',
				isOpenz: false,
				// 表单校验
				rules: {
					uname: [{
						required: true,
						message: "用户姓名不能为空",
						trigger: "blur"
					}],
					uphone: [{
						required: true,
						message: "用户手机号不能为空",
						trigger: "blur"
					}],
					uId: [{
						required: true,
						message: "用户身份证不能为空",
						trigger: "blur"
					}],
					address: [{
						required: true,
						message: "联系地址不能为空",
						trigger: "blur"
					}]
				}
			};
		},
		methods: {
			goTarget(href) {
				window.open(href, "_blank");
			},
			showf() {
				this.isShow = true;
				this.isFrist = true;
				this.title = "首次登记";
			},
			open() {
				this.isShow = true;
				this.isFrist = false;
				this.title = '我要申请'
			},
			openz(){
				this.isOpenz = true;
				this.title = '转移登记'
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["fristForm"].validate(valid => {
					if (valid) {
						if (this.fristForm.uSn != null) {
							updateRuser(this.fristForm).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addRuser(this.fristForm).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
								this.isShow = false;
							});
						}
					}
				});
			},
			cancel() {
				this.isShow = false;
				this.open = false;

			}
		}
	};
</script>

<style scoped lang="scss">
	.index {}

	.home {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		// background-image: url("../assets/images/bg.jpg");
		background-size: cover;
	}

	.form {
		border-radius: 6px;
		background: #ffffff;
		width: 400px;
		padding: 25px 25px 5px 25px;

		.el-input {
			height: 38px;

			input {
				height: 38px;
			}
		}

		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 2px;
		}
	}
</style>